<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>document.elementFromPoint(clientX, clientY)</title>
	</head>
	<style>
		.box1 {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 100px auto;
		}
		.box2 {
			width: 100px;
			height: 100px;
			background-color: skyblue;
			margin: 0 auto;
		}
	</style>
	<body>
		<div class="box1">
			box1
			<div class="box2">box2</div>
		</div>

		<script>
			document.addEventListener('click', function (event) {
				// 返回在给定的窗口相对坐标处的嵌套的最深的元素（如果给定的坐标在窗口外，则返回 null）。
				// 如果同一坐标上有多个重叠的元素，则返回最上面的元素。
				const elemBelow = document.elementFromPoint(event.clientX, event.clientY)
				console.log('elemBelow', elemBelow)
			})
		</script>
	</body>
</html>
